<script lang="ts" setup>
import { onMounted,ref,onBeforeUnmount } from 'vue'
import { useRouter} from 'vue-router'
import { love } from '../util/love.js'
import { HelpFilled, Menu as IconMenu, Message, Setting ,Star,Ticket} from '@element-plus/icons-vue'
import * as THREE from 'three';
import CLOUDS from "vanta/src/vanta.clouds";
// 使用 ref 定义对 DOM 元素的引用
const vantaRef = ref<HTMLElement | null>(null);
let vantaEffect: clouds; 
const initThree = () => {
  if (vantaEffect) {
    vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 100.00,
      minWidth: 100.00,
      skyColor: 0xe8956d,
      cloudColor: 0xa0bfed,
      cloudShadowColor: 0x7c2b2b,
      sunColor: 0x723032,
      speed: 1.5
    });
  }
};
onMounted(() => {
  if (vantaRef.value) {
    vantaEffect = CLOUDS({
      el: vantaRef.value,
      THREE: THREE
    });
    initThree(); // 调用 initThree 来设置 Vanta.js 的选项
  }
});
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
// 获取路由实例
const router = useRouter()
// 创建一个响应式的 username 变量
const username = ref('')
// 组件挂载
onMounted(() => {
  love();
  username.value = sessionStorage.getItem('username') || '未登录'
})
// 登出逻辑
const logout = () => {
  const isConfirmed = window.confirm('确定要退出登录吗？');
  if (isConfirmed) {
    // 清空 token
    sessionStorage.clear();
    // 跳转到登录页
    router.push('/login');
  }
}
</script>
<template>
  <div class="common-layout">
    <div ref="vantaRef" class="vanta-background" style="width: 100%; height: 100%"></div>
    <el-container style="height: 100vh; padding: 0;">
      <el-header class="header" ref="header">
        <h1 class="title">游 乐 园 管 理 系 统</h1> 
        <span class="username">用户名：{{ username }}</span>    
        <el-button class="btn"  @click="logout">退 出 登 录</el-button>
      </el-header>
      <el-container style="margin-top: 0;">
        <el-aside width="200px" class="aside">
          <el-menu
            active-text-color="#4A4A4A"
            background-color="#ffffff"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#333"
            @open="handleOpen"
            @close="handleClose"
            router
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon class="menu-icon"><HelpFilled /></el-icon>
                <span>日常管理</span>
              </template>
              <el-menu-item-group title="消费管理">
                <el-menu-item index="1-1" route="consumptionrecord">消费记录</el-menu-item>
                <el-menu-item index="1-2" route="echarts">消费图表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="内部管理">
                <el-menu-item index="1-3" route="ticket">票据</el-menu-item>
                <el-menu-item index="1-4" route="bill">票务</el-menu-item>
                <el-menu-item index="1-5" route="category">票据设施关联</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="2" route="amusementfacility">
              <el-icon class="menu-icon"><icon-menu /></el-icon>
              <span>游乐设施</span>
            </el-menu-item>
            <el-menu-item index="3" route="amusementtype">
              <el-icon class="menu-icon"><Ticket /></el-icon>
              <span>设施类型</span>
            </el-menu-item>
            <el-menu-item index="4" route="staff">
              <el-icon class="menu-icon"><Star /></el-icon>
              <span>员工管理</span>
            </el-menu-item>
            <el-menu-item index="5" route="user">
              <el-icon class="menu-icon"><setting /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.common-layout {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.vanta-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 背景层在下层 */
}
.btn {
    margin-left: auto; /* 将按钮推到最右侧 */
    text-align: center;
    padding: 10px;
    width: 100px;
    height: 40px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: rgba(247, 202, 202, 0.2);
    color: #000000;
    font-size: 17px; /* 设置字体大小 */
    font-weight: 550;                  /* 字体粗细 */
    cursor: pointer; /* 设置鼠标悬停样式 */
}
.header {
  z-index: 1; /* 使标题文字在背景层上层 */
  justify-content: center; /* 在主轴方向上分配空间，按钮和标题分别在两侧 */
  display: flex; /* 使用 flexbox 布局 */
  text-align: center;
  font-size: 20px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.2); 
}
.header h1 {
  flex: 1; /* 使标题占据主轴上的剩余空间 */
  text-align: center; /* 标题在其容器内居中对齐 */
    margin: 0; /* 移除默认 margin */
    font-size: 2.7rem; /* 可根据需要调整字体大小 */
}
.title {
  flex: 1; /* 使标题占据主轴上的剩余空间 */
  text-align: center; /* 标题在其容器内居中对齐 */
  margin: 0; /* 移除默认 margin */
  font-size: 3rem; /* 调整字体大小 */
  color: #000000; /* 文字颜色 */
  background-clip: text; /* 仅对文字应用渐变背景 */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* 添加文字阴影 */
  padding: -5px; /* 内边距 */
}
.el-container {
  height: calc(100vh - 60px); /* 让内容区填满剩余空间 */
}
.aside {
  background-color: rgba(255, 255, 255, 0.2); 
  opacity: 0.8;
  padding-top: 25px; 
}
.main {
  padding-top: 25px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-size: cover;
  position: relative;  
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.2); 
}
.el-menu-vertical-demo .el-menu-item {
  border-radius: 10px;
}
.el-menu-vertical-demo .el-menu-item:hover {
  background-color: #cdf0fc;
}
.menu-icon {
  font-size: 30px;
  color: #01bfbfc9;
  margin-right: 30px;
}
.username {
  font-family: 'Roboto', sans-serif; /* 现代字体 */
  font-size: 0.9em;                   /* 字体大小 */
  color: #000000;                    /* 文字颜色 */
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;                 /* 内边距 */
  border-radius: 5px;               /* 圆角边框 */
  border: none;                      /* 去掉边框 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  display: inline-block;             /* 让 span 变成块级元素以便设置内边距 */
  margin: 10px;                       /* 外边距 */
  text-transform: capitalize;        /* 文字首字母大写 */
  font-weight: 550;                  /* 字体粗细 */
  /* cursor: pointer; 设置鼠标悬停样式 */
}
</style>


